
<template>
  <div class="btnSty " id="N_ConsultBomb"  style="display:none">
    <div class="N_inpNum">
      <!-- 技能组 -->
      <div class="N_inpNum_group">
        <!--取消图标-->
        <span  class="N_inpNum_group_tit">技能组</span>
        <div class="N_inpNum_group_list">
          <div  class="N_inpNum_group_nav"  v-for="(item,index)  in N_studentsListData"  >
            <p :class="{unactive:isRestReasonActive !=index,active:isRestReasonActive ==index}" @click = "N_inpNumGroupChid(index,item.skillId) ;N_inpNumcolor($event)"   style="cursor:pointer" >{{item.skillName}}</p>
            <!--<p class="inpNum_group_nav_btn"   @click = "inpNumGroupBtn(item.skillCode)" style="cursor:pointer">转接</p>-->
          </div>
        </div>
      </div>
      <!-- 坐席 -->
      <div class="N_inpNum_group">
        <span   class="N_inpNum_group_tit">坐席
                <i @click = 'N_ConsultBombOffBtn()' style="list-style: none" class="N_inpNumGroupTitIcon"  >
                  <Icon type="close-circled" class="N_inpNumGroupTitIcon"  ></Icon></i>
        </span>
        <div  class="N_inpNum_group_search">
          <input type="text" v-model="N_inptext"><button  @click = "N_inpNumSearch()" >搜索</button>
        </div>
        <div class="N_inpNum_group_list_zuoxi"   >
          <div  class="N_inpNum_group_nav" v-for="item in N_skillGroupata">
            <p  style="cursor:pointer" >{{item.userName}}</p>
            <p class="N_inpNum_group_nav_btn"   @click = "N_inpNumGroupBtn(item.extNumber)" style="cursor:pointer">{{item.status}}</p>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script scope>
    import softphoneiframe from 'service/softPhoneIframe.js'
export default {
    data() {
            return {
              N_studentsListData:[],//技能组列表
              N_skillGroupata:[],//技能组成员列表
              N_inptext:'',//获取搜索框文字
              N_groupSty:'xxx',
              N_searchGroup:'',//暂存技能组成员
              N_allWithStatetData:'',//获取所有成员
              isRestReasonActive:0
            };
        },
     methods: {
      //获取技能组
       async N_getUserSkillGroup(skillId) {
         let jsondata = await softphoneiframe.getUserSkillGroup({

         })
         if (!jsondata) {
           jsondata = []
         }
         this.N_studentsListData = jsondata
       },
         //      拨通技能组
       N_inpNumGroupBtn(num) {
         var changeBombBtn = Iframe.contentWindow.document.getElementById("ifly-softphone")
         var changeBombNum = num
         myframe.window.fn.transferCall(changeBombBtn, changeBombNum);
         document.getElementById("N_ConsultBomb").style.display = "none";
//         document.getElementById("ConsultBombNum").value = '';
            myframe.window.completeflag = true;
         this.$Message.info('正在协商转接，请稍后');

       },
       //         获取儿子技能组
       async N_inpNumGroupChid(c,id){
         console.log(id);
         let jsondata = await softphoneiframe.getUserSkillGroupMember({
                  'skillId':id,
         })
         console.log(jsondata);
//         if (!jsondata) {
//           jsondata = []
//         }

         for(let i=0;i<jsondata.length;i++){
           console.log(jsondata)
//           mediaAgentId：用户多媒体坐席ID
//           valid：是否为有效用户
//           agentId：用户坐席ID
//           agentType：用户坐席类型
             if(jsondata[i].status=='Ready') {
               jsondata[i].status='就绪'
             }else if(jsondata[i].status=='NotReady'){
               jsondata[i].status='未就绪可转接'
             }//：坐席状态，READY：坐席就绪，NOT_READY_BUT_TRANSFER_OK：未就绪可转接
//           userName：用户名
//           userId：用户ID
//           voiceAgentId：用户语音坐席工号
         }
         this.isRestReasonActive =c;
         this.N_skillGroupata = jsondata
       },
       //设置字体
       N_inpNumcolor(e){
         e.target.classname = 'groupSty'

       },
       async  N_allWithState(){
         let jsondata = await softphoneiframe. allWithState({

         })
         if (!jsondata) {
           jsondata = []
         }
         this.N_allWithStatetData = jsondata
       } ,
       //搜索技能组成员
       N_inpNumSearch(){
//         this.inpNumGroupChid( this.inptext)
         let inptext = this.N_inptext
         let memArr = this.N_allWithStatetData;
         let tempArr = [];
         let shuzu = [];
         for(let i=0;i<memArr.length;i++){
           for(let j=0;j<memArr[i].userList.length;j++){
             tempArr.push(memArr[i].userList[j]);
           }
         }
         for(let i=0;i<tempArr.length;i++){
           if((tempArr[i].userId).split("", inptext.length).join('')==inptext){
             if(tempArr[i].status=='Ready') {
               tempArr[i].status='就绪'
             }else if(tempArr[i].status=='NotReady'){
               tempArr[i].status='未就绪可转接'
             }
             shuzu.push(tempArr[i])
           };
         }
         this.N_skillGroupata=shuzu;
       },

        N_ConsultBombOffBtn() {
            document.getElementById("N_ConsultBomb").style.display = "none";
            myframe.window.completeflag = false;
            myframe.window.fn.reSetBtn();
        },

     },
      mounted(){
        let  _this = this;
        window.addEventListener("message", function(e) {
          if(typeof e.data == "object"){
             if(e.data.contTrans == true){
              _this.N_allWithState();
              _this.N_getUserSkillGroup();
            }
          }else{
          }
        }, false);
        }
}
</script>
<style    scoped>
.groupSty{
  color:red;
}
  ::-webkit-scrollbar{
    display:none;
  }
    .btnSty {
        width: 640px;
        height: 450px;
        /*padding: 0px 20px;*/
        position: absolute;
        left: 0;
        top: 0;
        right: 0;
        bottom: 0;
        margin: 80px auto;
        z-index: 999;
        background-color: #ffffff;
        border-bottom: 1px solid #e7e8eb;
        box-shadow: 0 0 10px 0 rgba(35, 35, 35, 0.5);
    }

    .btnSty span {
        display: block;
        width: 100%;
        height: 31px;
        line-height: 31px;
        font-size: 14px;
        padding-left: 10px;
        color: #fff3f3;
        /*background-color: #f05d49;*/
        margin-right: 10px;

    }


    .btnSty .N_inpNum .N_inpNum_group{
      float: left;
      width: 50%;
      min-height: 100%;
      border-left:1px solid #0f0f0f;


    }
    .N_inpNum_group_list{
      height:400px;
      overflow-y:scroll;
      overflow-x:hidden;
    }
  .N_inpNum_group_list_zuoxi{
      height:350px;
      overflow-y:scroll;
      overflow-x:hidden;
    }
    .btnSty .N_inpNum .N_inpNum_group .N_inpNum_group_tit{
      text-align: left;
      width: 96%;
      margin-bottom: 10px;
      margin-left: 10px;
      margin-right: 10px;
      color: #000;
    }
     .btnSty .N_inpNum .N_inpNum_group .N_inpNum_group_nav{
       /*position: relative;*/
       overflow: hidden;
       width:295px;
       height:30px;
       /*padding: 10px 20px;*/
       margin-bottom: 5px;
     }
    .btnSty .N_inpNum .N_inpNum_group .N_inpNum_group_nav p{
      display: inline-block;
    }
    .btnSty .N_inpNum .N_inpNum_group .N_inpNum_group_nav   .N_inpNum_group_nav_btn{
      border:1px solid #0f0f0f;
      /*position: absolute;*/
      /*top:0px;*/
      /*right: 15px;*/
      width:90px;
      height: 20px;
      padding: 0px 5px;
      float: right;
      display: block;
    }
    .N_inpNum_group_search{
      height: 50px;
    }
    .btnSty .N_npNum p {
        display: inline;
        font-size: 12px;
        color: #2b2b2b;
        margin-left: 10px;
    }
    .N_inpNumGroupTitIcon{
      position: absolute;
      right: 15px;
      font-size: 30px;
      width: 30px;
      height: 30px;
      color: #80848f;
    }
.N_inpNum_group_nav p:first-child.unactive{
  border: 1px solid #ddd;
}
.N_inpNum_group_nav  p:first-child.active{
  border: 1px solid #f05d49;
  background-color: #f05d49;
  color: #fff;
}
</style>
